<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>WebSocket Client</title>
 
 <style>
  html,body{font:normal 0.9em arial,helvetica;}
  #log {width:440px; height:200px; border:1px solid #7F9DB9; overflow:auto;}
  #msg {width:330px;}
 </style>
 
 <script>
 var socket;
 
 function init(){
   var host = "ws://127.0.0.1:9050";
   try{
     socket = new WebSocket(host);
 
     log('WebSocket - status '+socket.readyState);
     
     socket.onopen    = function(msg){ log("Welcome - status "+this.readyState); };
     socket.onmessage = function(msg){ log("Received: "+msg.data); };
     socket.onclose   = function(msg){ log("Disconnected - status "+this.readyState); };
   }
   catch(e) {
      log(e); 
   }
   $("msg").focus();
 }
 
 function send(){
   var txt,msg;
   txt = $("msg");
   msg = txt.value;
   if(!msg){ alert("Message can not be empty"); return; }
   txt.value="";
   txt.focus();
   log(socket);
   try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log("send error: " + ex); }
 }
 function quit(){
   //log("Goodbye!");
   socket.close();
   socket=null;
 }
 
 // Utilities
 function $(id){ return document.getElementById(id); }
 function log(msg){ $("log").innerHTML+="<br>"+msg; }
 function onkey(event){ if(event.keyCode==13){ send(); } }
 </script>
 
 </head>
 <body onload="init()">
  <h3>WebSocket</h3>
  <div id="log"></div>
  <input id="msg" type="textbox" onkeypress="onkey(event)"/>
  <button onclick="send()">Send</button>
  <button onclick="quit()">Quit</button>
 </body>
 </html>